<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Startup</title>
    <style>
      .test {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script
    crossorigin
    src="https://unpkg.com/react@18/umd/react.development.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
  ></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
  <script type="text/babel">
    // 列表渲染
    const list = [];
    for (let index = 0; index < 10; index++) {
      list.push({ val: `我是列表第${index + 1}项`, id: index });
    }
    // 创建一个页面组件
    function MyProducte() {
      // useState是react提供给我们的一个常用的hook,这个hook只能函数最外层使用
      const [test, setTest] = React.useState(0);
      return (
        <div>
          <div>{test}</div>
          <ul>
            {list.map((v, index) => (
              <li
                style={{ color: v.id % 2 == 0 ? 'red' : 'blue' }}
                key={v.id}
                onClick={() => setTest(test + index)}
              >
                {v.val}
              </li>
            ))}
          </ul>
        </div>
      );
    }

    function MyProducts({ count, setCount }) {
      // useState是react提供给我们的一个常用的hook,这个hook只能函数最外层使用
      return (
        <div>
          <ul>
            {list.map((v, index) => (
              <li
                style={{ color: v.id % 2 == 0 ? 'red' : 'blue' }}
                key={v.id}
                onClick={() => setCount(count + index)}
              >
                {v.val}
              </li>
            ))}
          </ul>
        </div>
      );
    }

    function MyAPP() {
      // 组件间的数据共享
      const [count, setCount] = React.useState(0);
      return (
        <div>
          {count}
          <MyProducts count={count} setCount={setCount} />
          <MyProducts count={count} setCount={setCount} />
        </div>
      );
    }

    const rootNode = document.getElementById('root');
    const root = ReactDOM.createRoot(rootNode);
    root.render(React.createElement(MyAPP));
  </script>
</html>
